{% extends 'layout.html' %}

{% block document%}数据管理{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/detail.css' %}">
{%endblock%}
    {% block content%}
    <div class="container">
        <header >
            <div class="header-left">
                <img src="{%static '/images/管理.png'%}" alt="">
                <h1>数据管理</h1>
            </div>
            <!-- 打开模态框添加数据 -->
            <div class="header-right">
                <button id="button1" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
                    添加数据
                </button>
                <a href="{% url 'index'%}" class="btn btn-default">返回首页</a>
            </div>
        </header>

            <!-- Modal 输入数据-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <form action="" novalidate method="post" id="form">
                    {%csrf_token%}
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div style="display: flex;align-items:end;">
                        <h4 class="modal-title" id="myModalLabel">添加计划</h4>
                        <span id="success-info" style="color: red;margin-left: 10px;" hidden>添加成功</span>
                    </div>
                </div>
                <div class="modal-body">
                        {% for field in forms%}
                            <div class="form-group">
                                {% if field.label == "计划详情"%}
                                        {{field.label}}
                                {% else %}
                                <span style="color: red;">*</span> {{field.label}}
                                {% endif%}
                                {{field}}
                                <div id="{{field.name}}" class="error-message" style="color: red;"></div>
                            </div>
                        {%endfor%}

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="close">退出</button>
                    <button type="button" class="btn btn-primary" id="submit">提交</button>
                </div>
                </div>
                </form>
            </div>
            </div>
        <section>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            <input class="checkbox select-all" type="checkbox">
                        </th>
                        <th>序号</th>
                        <th>月份</th>
                        <th>工作计划</th>
                        <th>任务状态</th>
                        <th>创建时间</th>
                        <th>责任单位</th>
                        <th>责任人</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for obj in queryset %}
                    <tr>
                        <td>
                            <input class="checkbox select-item" type="checkbox">
                        </td>
                        <td>{{obj.id}}</td>
                        <td>{{obj.get_month_display}}</td>
                        <td>{{obj.content_title}}</td>
                        <td>{{obj.get_status_display}}</td>
                        <td>{{obj.create_date | date:"Y-m-d"}}</td>
                        <td>{{obj.department}}</td>
                        <td>{{obj.leader}}</td>
                        <td><a href="">编辑</a><a href="">详情</a></td>
                    </tr>
                    {%endfor%}
                </tbody>
            </table>
        </section>
            </div>
{% endblock %}
{% block script%}
    <script>
        $(document).ready(function(){
            $('#myModal').on('shown.bs.modal', function () {
                $('#myInput').focus();
            })

            // checkbox多选操作
            $('.select-all').change(function(){
                if(this.checked){
                    $(".select-item").prop("checked",true);
                }else{
                    $(".select-item").prop("checked",false)
                }
            })

            // 点击退出,刷新模态框
            $("#close").click(function(){
                $("#form")[0].reset();

            })


            // 提交表单，发送Ajax请求
            $("#submit").click(function(){
                $(".error-message").html('');
                data=$("#form").serialize();
                data.csrfmiddlewaretoken=$("form").children().first().val()
                $.ajax({
                        type: 'POST',
                        url: 'http://127.0.0.1:8000/detail',
                        //属性 contentType 用于告诉服务器请求体的数据类型是什么，默认值为 application/x-www-form-urlencoded，
                        //application/json 表示请求体是 JSON 格式的数据，application/x-www-form-urlencoded 表示请求体是表单数据。
                        //contentType: 'application/json; charset=utf-8',
                        //属性 processData 用于指定 data 属性值是否需要自动转换，默认为 true。
                        //processData: false,
                        //属性 data 用于指定发送到服务器的数据，类型可以是 Key/Value 对、JSON 字符串、FromData 对象等，
                        //此时此处 data 属性值将自动转换为表单数据格式并放在请求体中。
                        // data: {'csrfmiddlewaretoken': csrftoken, "month": month ,"content_title":content_title,
                            // "content_detail":content_detail,"status":status,"department":department,"leader":leader},
                        data:data,
                        //JavaScript 内置对象 JSON 的方法stringify()，用于将 JavaScript 对象转换成 JSON 格式的字符串。
                        //data: JSON.stringify({ param1:value1,param2:value2 }),
                        success: function(data,textStatus,jqXHR){
                        //假设响应体为 JSON 格式的字符串，此时我们可以通过 JavaScript 内置对象JSON的方法parse()将其转换成 JavaScript 对象。
                        // console.log(JSON.parse(data));
                        if (data.success){
                            $("#success-info").show();
                            setTimeout(function(){
                                $("#success-info").hide();
                            },5000)
                            $("#form")[0].reset();
                            // 监听模态框关闭事件，刷新页面
                            $('#myModal').on('hide.bs.modal', function (e) {
                                window.location.reload();
                            });
                            }
                        // 将错误信息写入对顶的表单控件下方
                        $.each(data.errors,function(field,errors){
                            console.log(field,errors[0])
                            $('#'+field).append(errors[0])
                        }),

                            // 监听模态框关闭事件,清除表单验证信息
                            $('#myModal').on('hide.bs.modal', function (e) {
                                $(".error-message").html("");
                            });

                        },
                        timeout: 2000,
                        error: function(jqXHR,textStatus){
                        console.log("请求失败，请稍后重试!");
                        }
            })
            })

        })
    </script>
{%endblock%}